<template>
    <div>
        <div class="global-bg"></div>
        <div class="ScreenAdapter" :style="style">
            <slot />
        </div>
    </div>
</template>
<script>
export default {
    name: "z-translatescale",
    // 参数注入
    props: {
        width: {
            type: String,
            default: "1920"
        },
        height: {
            type: String,
            default: "1080"
        },
        bgUrl: {
            type: String
        },
        padding: {
            type: String,
            default: "0"
        },
        isFull: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            style: {
                width: this.width + 'px',
                height: this.height + 'px',
                transform: "scale(1) translate(-50%, -50%)",
                background: `url(${this.bgUrl}) no-repeat center`,
                backgroundSize: "cover",
                padding: this.padding
            }
        }
    },
    mounted() {
        this.setScale();
        window.onresize = this.Debounce(this.setScale, 1000)
    },
    methods: {
        Debounce: (fn, t) => {
            const delay = t || 500;
            let timer;
            return function () {
                const args = arguments
                if (timer) {
                    clearTimeout(timer)
                }
                const context = this
                timer = setTimeout(() => {
                    timer = null
                    fn.apply(context, args)
                }, delay)
            }
        },
        // 获取放大缩小比例
        getScale() {
            const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < this.width / this.height
                ? document.documentElement.clientWidth / this.width
                : document.documentElement.clientHeight / this.height
            return scale;
        },
        // 设置比例
        setScale() {
            this.style.transform =
                "scale(" + this.getScale() + ") translate(-50%)";
        }
    }
};
</script>
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}



.global-bg {
    width: 100%;
    height: 100%;
    background: black;
    z-index: 0;
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
}

.ScreenAdapter {
    transform-origin: 0 0;
    box-sizing: border-box;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 0%;
    transition: 0.3s;
    pointer-events: none;
    z-index: 10;
}
</style>
